<ti-drop
  class="ti3-head-filter-drop"
  [dominatorElem]="dominatorElem"
  [panelWidth]="panelWidth"
  [panelAlign]="panelAlign"
  [dominatorSpace]="dominatorSpace"
>
  <!-- 时间日期面板不显示搜索框,和单选多选是两个独立的模板 -->
  <ng-container *ngIf="!isDatetime">
    <div *ngIf="searchable">
      <ti-searchbox-notsearch
        #searchboxCom
        noBorder
        [(ngModel)]="searchWord"
        (ngModelChange)="searchWordChange($event)"
        [id]="appendId('searchbox')"
      >
      </ti-searchbox-notsearch>
    </div>
    <ti-list
      *ngIf="listInited"
      [multiple]="multiple"
      [selectAll]="selectAll"
      [options]="((type !== 'suggestion' && searchable) || type === 'suggestion')?searchResult:options"
      [(ngModel)]="selected"
      [idKey]="idKey"
      [labelKey]="labelKey"
      [noDataText]="noDataText"
      [virtual]="virtual"
      style="display: block"
      (select)="onSelect($event)"
      [id]="appendId('list')"
    >
      <ng-template let-item let-i="index" let-last="last">
        <ng-container *ngIf="itemTemplate else listLabelTemplate">
          <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item,index: i,last: last}"> </ng-container>
        </ng-container>
        <ng-template #listLabelTemplate>{{item[labelKey]}}</ng-template>
      </ng-template>
    </ti-list>
    <section *ngIf="multiple" (mousedown)="btnContainerMousedown($event)">
      <section class="ti3-head-filter-drop-button-container">
        <button
          type="button"
          tiButton
          label="ok"
          size="small"
          class="ti3-head-filter-drop-button-ok"
          (click)="okClick()"
          [id]="appendId('ok')"
        ></button>
        <button type="button" tiButton label="cancel" size="small" (click)="cancelClick()" [id]="appendId('cancel')"></button>
      </section>
    </section>
  </ng-container>
  <ng-container *ngIf="isDatetime">
    <ng-container *ngTemplateOutlet="datetimeTemplate"> </ng-container>
  </ng-container>
</ti-drop>

<!-- 时间日期下拉过滤 -->
<ng-template #datetimeTemplate>
  <section class="ti3-head-filter-drop-datetime">
    <section class="ti3-head-filter-drop-datetime-tip">{{ 'tiTable.headFilterDatetimeTitle' | tiTranslate }}</section>
    <section class="ti3-head-filter-drop-datetime-field">
      <label>{{ 'tiDatedominator.rangeBeginLabel' | tiTranslate }}</label>
      <ti-datetime
        *ngIf="!datetimeConfig?.onlyDate else dateStartTemplate"
        #datetimeStart
        [(ngModel)]="datetimeSelected.start"
        [max]="datetimeLimit.startMax"
        [min]="datetimeConfig.min"
        [format]="datetimeConfig.format"
        (ngModelChange)="dateStartChange($event)"
        [id]="appendId('datetime_start')"
      >
      </ti-datetime>
      <ng-template #dateStartTemplate>
        <ti-date
          #datetimeStart
          [(ngModel)]="datetimeSelected.start"
          [max]="datetimeLimit.startMax"
          [min]="datetimeConfig.min"
          [format]="datetimeConfig.format"
          (ngModelChange)="dateStartChange($event)"
          [id]="appendId('datetime_start')"
        >
        </ti-date>
      </ng-template>
    </section>
    <section class="ti3-head-filter-drop-datetime-field">
      <label>{{ 'tiTable.rangeEndLabel' | tiTranslate }}</label>
      <ti-datetime
        *ngIf="!datetimeConfig?.onlyDate else dateEndTemplate"
        #datetimeEnd
        [(ngModel)]="datetimeSelected.end"
        [max]="datetimeConfig.max"
        [min]="datetimeLimit.endMin"
        [format]="datetimeConfig.format"
        (ngModelChange)="dateEndChange($event)"
        [id]="appendId('datetime_end')"
      >
      </ti-datetime>
      <ng-template #dateEndTemplate>
        <ti-date
          #datetimeEnd
          [(ngModel)]="datetimeSelected.end"
          [max]="datetimeConfig.max"
          [min]="datetimeLimit.endMin"
          [format]="datetimeConfig.format"
          (ngModelChange)="dateEndChange($event)"
          [id]="appendId('datetime_end')"
        >
        </ti-date>
      </ng-template>
    </section>
    <section class="ti3-head-filter-drop-datetime-buttons">
      <button
        tiButton
        label="ok"
        #datetimeOk
        type="button"
        size="small"
        (click)="onClickDatetimeOK()"
        [id]="appendId('datetime_ok')"
      ></button>
      <button
        tiButton
        label="cancel"
        #datetimeCancel
        type="button"
        size="small"
        (click)="onClickDatetimeCancel()"
        [id]="appendId('datetime_cancel')"
      ></button>
    </section>
  </section>
</ng-template>
